<template>
  <div>
    <!-- 顶部搜索 -->
    <van-search placeholder="请输入搜索关键词" @focus="toSearch" />
    <!-- 轮播 -->
    <Banner />
    <!-- tab效果 -->
    <van-tabs animated>
      <van-tab v-for="v in tabs" :title="v.title" :key="v.id">
        <!-- 列表 -->
        <List :list="v.children"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Banner from "@/components/Banner";
import List from '@/components/List'
export default {
  name: "BookShop",
  components: {
    Banner,
    List
  },
  computed: {
    // 获取 tabs 数据
    tabs() {
      return this.$store.state.tabs;
    }
  },
  methods: {
    // 跳转路由 search
    toSearch() {
      this.$router.push("/search");
    }
  },
  created() {
    // 获取接口数据
    this.$store.dispatch('FetchTabs')
  }
};
</script>

